<template>
	<view class="register">

		<view class="content">
			<!-- 头部logo -->
			<view class="header">
				<image :src="logoImage"></image>
			</view>
			<!-- 主体 -->
			<view class="main">
				<wInput v-model="username" type="text" placeholder="账号"></wInput>
				<wInput v-model="password" type="password" placeholder="密码"></wInput>
			</view>

			<wButton bgColor="#01906c" class="wbutton" text="注 册" :rotate="isRotate" @click.native="startReg()"></wButton>

			<!-- 底部信息 -->
			<view class="footer">
				<text @tap="isShowAgree" class="cuIcon" :class="showAgree ? 'cuIcon-radiobox' : 'cuIcon-round'"> 同意</text>
				<!-- 协议地址 -->
				<navigator url="" open-type="navigate">《协议》</navigator>
			</view>
		</view>
	</view>
</template>

<script>
let _this;
import wInput from '../../components/watch-login/watch-input.vue' //input
import wButton from '../../components/watch-login/watch-button.vue' //button

export default {
	data() {
		return {
			//logo图片 base64
			logoImage: '',
			username: '', // 用户
			password: '', //密码
			showAgree: true, //协议是否选择
			isRotate: false, //是否加载旋转
		}
	},
	components: {
		wInput,
		wButton,
	},
	mounted() {
		_this = this;
	},
	methods: {
		isShowAgree() {
			//是否选择协议
			_this.showAgree = !_this.showAgree;
		},
		startReg() {
			//注册
			if (this.isRotate) {
				//判断是否加载中，避免重复点击请求
				return false;
			}
			this.isRotate = true;
			if (this.showAgree == false) {
				uni.showToast({
					icon: 'none',
					position: 'bottom',
					title: '请先同意《协议》'
				});
				this.isRotate = false;
				return false;
			}
			if (this.username == '') {
				uni.showToast({
					icon: 'none',
					position: 'bottom',
					title: '请输入账号'
				});
				this.isRotate = false;
				return false;
			}
			if (this.password.length < 6) {
				uni.showToast({
					icon: 'none',
					position: 'bottom',
					title: '密码长度不能小于6位'
				});
				this.isRotate = false;
				return false;
			}
			this.loading = true;
			this.isRotate = true;
			this.$api.register({
				username: this.username,
				password: this.password
			}).then((res) => {
				this.loading = false;
				this.isRotate = false;
				console.log(res);
				if (res.code == 1) {
					uni.showToast({
						icon: 'success',
						position: 'bottom',
						title: '注册成功'
					});
					uni.reLaunch({
						url: '/pages/login/login',
					});
				}
				uni.hideLoading();
			}).catch((err) => {
				this.loading = false;
				uni.showToast({
					icon: 'error',
					position: 'bottom',
					title: "系统错误，请稍后再试"
				});
				uni.hideLoading();
			})
		}
	}
}
</script>

<style>
@import url("../../components/watch-login/css/icon.css");
@import url("./css/main.css");
</style>